<template>
  <div class="order">
    <!-- 头部标题 -->
    <div class="order-header">
      <div class="order-header-tt">订单列表</div>
    </div>

    <!-- 订单列表 -->
    <div class="order-main">
      <ul id="orderList" class="order-list">
        <li class="list-item" v-for="(item,index) in tableData" :key="index">
          <div class="list-item-l">
            <div class="list-col order-img">
              <img :src="item.headshot">
            </div>
            <div class="list-col order-info">
              <div class="order-type mb2">{{item.category}}</div>
              <div class="order-way">{{item.type==1 ? '电子照' : (item.type==2 ? '现场打印' : '快递到家')}}</div>
            </div>
            <div class="list-col order-info pl2">
              <div class="order-deta mb2">{{item.size}}、{{item.bgc}}、{{item.number}}份</div>
              <div class="order-time c999">{{item.createAt}}</div>
            </div>
          </div>
          <div class="list-item-r order-opera" @click="showMask(index)">
            <span class="iconfont icon-youjiantou"></span>
          </div>
        </li>
      </ul>
      <Pagination :pageNo="pageNo" :pageSize="pageSize" :showPageNo="3" :total="orderInfo.length" @listData="listData"/>
    </div>

    <!-- 订单详情 -->
    <div class="mask">
      <div class="order-data">
        <div class="data-header">
          <div class="fw700">订单详情</div>
          <span class="iconfont icon-shanchu" @click="noShowMask"></span>
        </div>
        <div class="data-col">
          <img :src="maskData.headshot">
          <div class="ml2">
            <div class="data-phone mb2">{{maskData.userPhone}}</div>
            <div>{{maskData.size}}、{{maskData.bgc}}、{{maskData.number}}份、{{maskData.type==1 ? '电子照' : (maskData.type==2 ? '现场打印' : '快递到家')}}</div>
          </div>
        </div>
        <div class="data-col">
          <div>门店：</div>
          <div>{{maskData.storeName}}</div>
        </div>
        <div class="data-col">
          <div>金额：</div>
          <div>￥{{maskData.totalMoney}}元</div>
        </div>
        <div class="data-col">
          <div>下单时间：</div>
          <div>{{maskData.createAt}}</div>
        </div>
        <div class="data-btn" :style="maskData.type==3 ? styleObj : styleObj1">
          <button class="btn" id="dowBtn" @click="dowImg">下载打印</button>
          <button class="btn" id="sendBtn" v-if="maskData.type==3" @click="userLoc">寄送地址</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Order",
  props: ['orderInfo'],
  data() {
    return {
      //分页器参数，代表第几页
      pageNo: 1,
      //每页展示产品个数
      pageSize: 5,
      //每页展示的数据
      tableData: [],
      //蒙版层展示的数据
      maskData: {},
      styleObj: {
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        padding: "3vw 4vw 3vw",
        marginTop: "1vw",
        borderTop: ".4vw solid #999",
      },
      styleObj1: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        padding: "3vw 4vw 3vw",
        marginTop: "1vw",
        borderTop: ".4vw solid #999",
      }
    }
  },
  created(){
    //先剪切第一页的数据
    this.tableData = this.orderInfo.slice((this.pageNo - 1) * this.pageSize,this.pageNo * this.pageSize);
  },
  mounted() {
    //获取订单列表数据
    this.$store.dispatch('getOrderInfo');
    //绑定自定事件时
    this.$bus.$on('listData',this.listData)
  },
  beforeDestroy(){
    //解绑全局事件
    this.$bus.$off('listData');
  },
  methods: {
    showMask(index) {
      let i = (this.pageNo-1)*this.pageSize + index;
      this.maskData = this.orderInfo[i];
      var oMask = document.querySelector(".mask");
      oMask.style.display = "block";
    },
    noShowMask() {
      var oMask = document.querySelector(".mask");
      oMask.style.display = "none";
    },
    //修改分页器页数
    listData(pageNo) {
      this.pageNo = pageNo;
      this.tableData = this.orderInfo.slice((this.pageNo - 1) * this.pageSize,this.pageNo * this.pageSize);
    },
    //下载打印图片
    async dowImg(){
      try{
        await this.$store.dispatch('getOrderDow',{orderId: this.maskData.orderId});
        window.location.href= this.imgInfo.composing;
      }catch(error){
        alert(error.message);
      }
    },
    //查看地址
    userLoc() {
      alert(this.maskData.userLocaltion);
    }
  },
  computed: {
    ...mapState({
      imgInfo: (state) => state.home.imgInfo || {},
    }),
  }
}
</script>

<style scoped>
  .mb2 {
    margin-bottom: 1.2vh;
  }

  .c999 {
    color: #999;
  }

  .pl2 {
    padding-left: 2vw;
  }

  .ml2 {
    margin-left: 2vw;
  }

  .fw700 {
    font-weight: 700;
  }
 
  .order {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 99%;
    padding-top: 1.6vh;
    padding-left: 3vw;
    padding-right: 3vw;
    background-color: #fff;
    border-radius: 4vw;
  }

  .order .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4vh;
  }

  .order .order-header-tt {
    font-size: 4.5vw;
    font-weight: 700;
  }

  .order .order-header-add {
    display: flex;
    align-items: center;
    color: #409EFF;
  }

  .order .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1vh;
    border-bottom: .2vh solid #ccc;
  }

  .order .list-item-r {
    display: flex;
    align-items: center;
    color: #409EFF;
    font-size: 3.8vw;
  }

  .order .list-item-l {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .order .order-img {
    padding-left: 1vw;
  }

  .order .order-img>img {
    width: 14vw;
    height: 9vh;
  }

  .order .icon {
    padding-left: .5vw;
    color: #409EFF;
    font-size: 2vw;
  }

  .order .order-info {
    margin-left: 3.6vw;
    font-size: 3.8vw;
  }

  .mask {
    display: none;
    position: absolute;
    width: 103vw;
    height: 83.2vh;
    left: -3vw;
    top: -1.6vh;
    background-color: rgba(0, 0, 0, .4);
    z-index: 999;
  }
  

  .mask .order-data {
    box-sizing: border-box;
    position: relative;
    width: 80vw;
    height: 47vh;
    top: 50%;
    left: 50%;
    margin-top: -25vh;
    margin-left: -38.5vw;
    background-color: #fff;
    border-radius: 3vw;
  }

  .mask .data-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4vw;
    padding: 2vw 4vw 2vw;
    margin-bottom: 1vw;
    border-bottom: .4vw solid #999; 
  }

  .mask .data-col {
    display: flex;
    align-items: center;
    padding: 2vw 4vw 2vw;
    font-size: 4vw;
  }

  .mask .data-col>div:last-child {
    color: #8D8D8D;
  }

  .mask .data-col>img {
    width: 18vw;
    height: auto;
  }

  .mask .data-btn
  {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3vw 4vw 3vw;
    margin-top: 1vw;
    border-top: .4vw solid #999; 
  }

  .mask .btn {
    width: 30vw;
    height: 4vh;
    color: #fff;
    background-color: #118EE9;
    border: 0.4vw solid #118EE9;
    border-radius: 0.8vh;
  }
</style>